<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常见标签</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
</head>
<body>
	<!-- 
		语义：
		权重：

		群组选择器，例如 h1,h2,h3{
	
			margin:0px;
		}

		title标签
			写法<title></title>
			双标签
			语义：网页标题
			权重最大
		div标签
		   写法：<div></div>
		   双标签
		   语义：无意义
		   默认样式 无
		H标签
		  写法：h$*6 Tab
		   <h11></h11>
		   <h12></h12>
		   <h13></h13>
		   <h14></h14>
		   <h15></h15>
		   <h16></h16>
			双标签
			语义：标题
			默认样式：有
			font-size,font-weight, margin
			权重：h1>h2>h3>...
				h1页面中最好不要超过一个，
				h2不要超过12个，h3之后随便

			p标签
			    写法<p><p>
			     双标签
                语义：段落
                默认样式 margin
                注意：p标签不要在包含p标签（或者别的块标签div..）
			ul标签
			   写法<ul></ul>
			   双标签
			   语义：无序列表
			   默认样式：
			 li标签
			 	写法：<li></li>
			 	双标签
			 	语义：列表项
			 	默认样式：  list-style-type
				
			ul和lis是组合标签
			ul的第一层子级一定是li,li的父级一定是ul（ol）

			<ul>
			<li></li>
			<li>
			<div></div>
			<p></p>	
			</li>
			</ul>
		ol标签（有序列表）
		默认样式margin padding-left list-style

		dl 
		  自定义标签  字典标签
		  dl dt dd
		  写法<dl></dl>
		  双标签
		  语义：自定义列表
		  默认样式 margin
		 dt
		  写法<dt></dt>
		  双标签
		  语义：列表标题
		  默认样式 无
		 dd
		默认样式写法<dd></dd>
		双标签
		语义：列表说明
		默认样式	margin-left

块标签：
    特性：1默认是父级100%宽；
          2支持所有css样式。
		  3独占一行	


内联属性标签：行标签
	a内联标签
		特性：
		1同属性的标签排在同一排
		2内容撑开宽度
		3不支持宽高,不支持上下的padding和margin
		4标签之间的换行被解析（回车空格），间距大小取决于父级的font-size的大小，只会解析一次

		span标签
		   写法<span></span>
		   双标签
		   语义：无意义。
		   默认样式：无
		strong标签
		  写法：<trong></strong>
		  双标器
		  语义：强调
		  默认样式：font-weigth
		  权重比较高
		 em标签
		   写法：<em></em>
		   双标签
		   语义：强调
		   默认样式：font-style
		   权重比较高
		 a标签
		    写法<a href="链接" target="打开网页方式"></a> 
		    双标签
			语义:超链接
			默认样式:color text-decoration 下划线 cursor
		    注意：href属性中
		          	1如何链接到网址的话一定要加http
					2#代表链接到当前页
				target
				   _self 默认在当前窗口打开
				   _blank在新窗口打开	
	b内联块标签
		特性：
			1同属性的标签排在同一排
			2内容撑开宽度。
			3支持所有的css样式
			4代码换行被解析，间隙大小取决于父级的font-size

			img标签
			写法：<img src="图片的路径地址" alt="图片说明">
			单标签
			语义:图片
			默认样式：低版本浏览器中有默认的边框
			 提示：
			  1路径地址要正确，2 alt属性可以提高图片搜索率

	标签类型的转换
	    display
	    
		显示为无： display:none;
	    块属性 display：block;
	    内联属性
	       内联  display:inline;
	       内联块 display:inline-block;		  
	 -->
	 <style type="text/css">
	 	.div,span{
	 		border: 1px solid red;
	 		width: 100px;
	 		height: 100px;
	 		padding: 10px;
	 		margin: 50px;

	 	}
	 	
	 img{
		border: 1px solid red;
	 	width: 500px;
	 	height: 400px;
	 	margin: 5px;
	 	padding: 30px;
	 }
#div{
border: 1px solid red；

width: 100px;
height: 100px;


}
.span{

	border: 1px solid red;
	display: block;
	width:400px;
	height: 200px;

}

	 </style>
</body>
	<div>
		h${我是h$}*6  Tab
		<h1>我是h1</h1>
		<h2>我是h2</h2>
		<h3>我是h3</h3>
		<h4>我是h4</h4>
		<h5>我是h5</h5>
		<h6>我是h6</h6>
		<p>我是p</p>
		<p>我是一个段落我是啊大家撒大家安静打开大街上大家说的傻大姐卡就是打开啦阿萨德</p>
	</div>
	<div>
		<ul>
			<li1>我是li1</li1>
			<li2>我是li2</li2>
			<li3>我是li3</li3>
			<li4>我是li4</li4>
		</ul>
		<ol>
			<li1>我是li1</li1>
			<li2>我是li2</li2>
			<li3>我是li3</li3>
			<li4>我是li4</li4>
		</ol>		
		<dl>
			<dt>美女</dt>
			<dd>古代按时间打开位</dd>
			<dd>大神肯德基</dd>

		</dl>
	</div>
	<span>一样的样式</span>
	<div class="div">我是div</div>
	<span>我是span1</span><span>我是span2</span>
	<span>我是span3</span>
	<strong>我是strong</strong><strong>我是strong</strong>
	

	<strong>我是strong</strong>          <strong>我是strong</strong>

	<em>我是em</em>  <em>我是em</em><em>我是em</em>

	<a href="http:www.baidu.com" target="_blcak">我是a</a><a href="#">我也是</a>  <a href="www.baidu.com">大沙地</a>

	<img src="..\img\1.jpg" alt="风景">
	<span>标签类型的转换display</span>
	<div id="div" style="width: 100px color:red border:1px;">我是div转内联</div>
	<div style="border: 1px">123</div>
	<span class="span">我是span转块</span>
</html>